﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "生产工单管理";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生产工单管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        /* 整体布局美化 */
        .layui-fluid {
            background-color: #f2f2f2;
            padding: 15px;
        }
        .layui-card {
            border-radius: 4px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .layui-card-header {
            height: auto !important;
            line-height: normal;
            padding: 15px;
            border-bottom: 1px solid #f6f6f6;
        }
        .layui-card-body {
            padding: 15px;
        }

        /* 搜索区域美化 */
        .layui-form-label {
            color: #666;
            font-weight: 500;
        }
        .layui-input {
            border-radius: 4px;
            border-color: #e6e6e6;
            transition: all .3s;
        }
        .layui-input:hover, .layui-input:focus {
            border-color: #1E9FFF;
            box-shadow: 0 0 5px rgba(30,159,255,.15);
        }
        .layui-form-select dl {
            border-radius: 0 0 4px 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,.12);
        }

        /* 按钮美化 */
        .layui-btn {
            border-radius: 4px;
            box-shadow: 0 1px 1px rgba(0,0,0,.05);
            transition: all .3s;
        }
        .layui-btn:hover {
            opacity: .8;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,.1);
        }
        .layui-btn-primary {
            border-color: #e6e6e6;
        }
        .layui-btn-primary:hover {
            border-color: #1E9FFF;
            color: #1E9FFF;
        }
        .layui-btn .layui-icon {
            margin-right: 5px;
        }

        /* 表格美化 */
        .layui-table {
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .layui-table thead tr {
            background-color: #fafafa;
        }
        .layui-table-header {
            border-radius: 4px 4px 0 0;
        }
        .layui-table-tool {
            background-color: #fff;
            border-bottom: none;
            padding: 15px;
            border-radius: 4px 4px 0 0;
        }
        .layui-table-tool .layui-btn {
            margin-bottom: 0;
        }
        .layui-table-cell {
            height: 45px;
            line-height: 45px;
        }
        .layui-table-page {
            border-radius: 0 0 4px 4px;
            background-color: #fff;
            padding: 15px;
        }

        /* 状态标签美化 */
        .status-tag {
            padding: 2px 8px;
            border-radius: 2px;
            font-size: 12px;
            display: inline-block;
            line-height: 20px;
        }
        .status-draft {
            background-color: #e6f7ff;
            color: #1890ff;
            border: 1px solid #91d5ff;
        }
        .status-confirmed {
            background-color: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }
        .status-completed {
            background-color: #f5f5f5;
            color: #666;
            border: 1px solid #d9d9d9;
        }

        /* 搜索表单布局优化 */
        .search-form-container {
            background-color: #fff;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        .search-form-container .layui-form-item {
            margin-bottom: 0;
        }
        .search-form-container .layui-inline {
            margin-bottom: 10px;
        }
        
        /* 操作按钮美化 */
        .table-operation-btn {
            padding: 4px 8px;
            font-size: 12px;
            margin: 0 4px;
        }
        .table-operation-btn i {
            font-size: 12px;
        }

        /* 弹出层美化 */
        .layui-layer {
            border-radius: 4px;
        }
        .layui-layer-title {
            background-color: #fff !important;
            border-bottom: 1px solid #f0f0f0 !important;
            padding: 15px 20px !important;
            font-size: 16px !important;
            font-weight: 500;
        }

        /* 操作列图标样式 */
        .icon-placeholder {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            background-color: #f5f5f5;
            margin: 0 3px;
            position: relative;
        }
        .icon-placeholder::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background-color: #ccc;
        }

        .required::before {
            content: '* ';
            color: red;
        }

        /* 新增横向布局表单样式 */
        .horizontal-form {
            padding: 20px;
        }

        .horizontal-form .form-row {
            display: flex;
            margin: 0 -10px;
            flex-wrap: wrap;
        }

        .horizontal-form .form-col {
            flex: 0 0 33.333333%;
            padding: 0 10px;
            margin-bottom: 20px;
        }

        .horizontal-form .form-col.full-width {
            flex: 0 0 100%;
        }

        .horizontal-form .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #606266;
            line-height: 1;
            position: relative;
        }

        .horizontal-form .form-label.required::before {
            content: '*';
            color: #f56c6c;
            margin-right: 4px;
        }

        .horizontal-form .layui-input,
        .horizontal-form .layui-select,
        .horizontal-form .layui-textarea {
            width: 100%;
            height: 32px;
            line-height: 32px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0 12px;
            background-color: #fff;
        }

        .horizontal-form .layui-input:hover,
        .horizontal-form .layui-select:hover,
        .horizontal-form .layui-textarea:hover {
            border-color: #c0c4cc;
        }

        .horizontal-form .layui-input:focus,
        .horizontal-form .layui-select:focus,
        .horizontal-form .layui-textarea:focus {
            border-color: #409eff;
        }

        .horizontal-form .layui-textarea {
            height: 80px;
            line-height: 1.5;
            padding: 8px 12px;
        }

        .horizontal-form .input-with-search {
            position: relative;
        }

        .horizontal-form .input-with-search .layui-icon {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #909399;
        }

        .horizontal-form .number-input {
            display: flex;
            align-items: center;
        }

        .horizontal-form .number-input .layui-btn {
            padding: 0;
            width: 32px;
            height: 32px;
            line-height: 32px;
            border: 1px solid #dcdfe6;
            background: #f5f7fa;
        }

        .horizontal-form .number-input .layui-input {
            margin: 0 -1px;
            text-align: center;
            border-radius: 0;
        }

        .horizontal-form .form-actions {
            margin-top: 30px;
            text-align: right;
            border-top: 1px solid #ebeef5;
            padding-top: 20px;
        }

        .horizontal-form .radio-group {
            display: flex;
            gap: 16px;
        }

        .horizontal-form .switch-field {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 新增表单样式 */
        .modern-form {
            padding: 20px;
        }

        .modern-form .form-item {
            margin-bottom: 24px;
            display: flex;
            align-items: flex-start;
        }

        .modern-form .form-item.col-2 {
            width: 50%;
            padding-right: 12px;
            display: inline-block;
            vertical-align: top;
        }

        .modern-form .form-row {
            display: flex;
            margin: 0 -12px;
            flex-wrap: wrap;
        }

        .modern-form .form-label {
            color: #606266;
            font-size: 14px;
            margin-bottom: 8px;
            position: relative;
            display: block;
        }

        .modern-form .form-label.required::before {
            content: '*';
            color: #f56c6c;
            margin-right: 4px;
        }

        .modern-form .form-control {
            width: 100%;
            position: relative;
        }

        .modern-form .layui-input,
        .modern-form .layui-select,
        .modern-form .layui-textarea {
            width: 100%;
            height: 32px;
            line-height: 32px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0 12px;
            background-color: #fff;
        }

        .modern-form .layui-textarea {
            height: 80px;
            line-height: 1.5;
            padding: 8px 12px;
        }

        .modern-form .search-icon {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: #c0c4cc;
            cursor: pointer;
        }

        .modern-form .number-input {
            display: flex;
            align-items: center;
            width: 150px;
        }

        .modern-form .number-input .layui-btn {
            width: 32px;
            height: 32px;
            padding: 0;
            margin: 0;
            border: 1px solid #dcdfe6;
            background: #f5f7fa;
        }

        .modern-form .number-input .layui-input {
            margin: 0 -1px;
            text-align: center;
            border-radius: 0;
        }

        .modern-form .switch-field {
            display: flex;
            align-items: center;
        }

        .modern-form .switch-field .layui-input {
            flex: 1;
            margin-right: 8px;
        }

        .modern-form .form-actions {
            margin-top: 32px;
            text-align: right;
            border-top: 1px solid #ebeef5;
            padding-top: 16px;
        }

        .modern-form .radio-group {
            display: flex;
            gap: 16px;
        }

        .modern-form .error-message {
            color: #f56c6c;
            font-size: 12px;
            margin-top: 4px;
        }

        /* 产品选择弹窗样式 */
        .product-select-dialog .layui-form-item {
            margin-bottom: 15px;
        }
        
        .product-select-dialog .layui-input {
            height: 32px;
            line-height: 32px;
            padding-left: 30px;
        }
        
        .product-select-dialog .layui-btn {
            height: 32px;
            line-height: 32px;
            padding: 0 15px;
        }
        
        .product-select-dialog .layui-tab-title {
            height: 40px;
        }
        
        .product-select-dialog .layui-tab-title li {
            line-height: 40px;
        }
        
        .product-select-dialog .layui-table-view {
            margin: 0;
        }
        
        .product-select-dialog .layui-table-cell {
            height: 32px;
            line-height: 32px;
        }
        
        /* 左侧树形菜单样式 */
        .product-category-tree {
            width: 200px;
            padding: 10px;
            border-right: 1px solid #e6e6e6;
        }
        
        .product-category-tree .tree-node {
            padding: 5px 0;
            cursor: pointer;
        }
        
        .product-category-tree .tree-node:hover {
            background-color: #f2f2f2;
        }
        
        .product-category-tree .tree-node.active {
            color: #1E9FFF;
        }
        
        .product-category-tree .tree-node .count {
            float: right;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 搜索表单 -->
            <div class="search-form-container">
                <form class="layui-form" lay-filter="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">工单编码</label>
                            <div class="layui-input-inline">
                                    <input type="text" name="workOrderCode" placeholder="请输入工单编码" class="layui-input">
                                </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">工单名称</label>
                            <div class="layui-input-inline">
                                    <input type="text" name="workOrderName" placeholder="请输入工单名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">产品编号</label>
                            <div class="layui-input-inline">
                                    <input type="text" name="productCode" placeholder="请输入产品编号" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                                <button type="button" class="layui-btn" lay-submit lay-filter="searchBtn">
                                <i class="layui-icon layui-icon-search"></i>搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-refresh"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>

                <!-- 工具栏 -->
                <div class="layui-btn-container" style="margin-bottom: 10px;">
                    <button class="layui-btn layui-btn-normal" id="addBtn">
                        <i class="layui-icon layui-icon-add-1"></i>新增工单
                    </button>
                </div>

                <!-- 数据表格 -->
                <table id="mainTable" lay-filter="mainTable"></table>
            </div>
        </div>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <!-- 状态列模板 -->
    <script type="text/html" id="statusTpl">
        {{#  if(d.documentStatus === 0){ }}
            <span class="status-tag status-draft">草稿</span>
        {{#  } else if(d.documentStatus === 1){ }}
            <span class="status-tag status-confirmed">已确认</span>
        {{#  } else if(d.documentStatus === 2){ }}
            <span class="status-tag status-completed">已完成</span>
        {{#  } }}
    </script>

    <!-- 产品选择弹窗模板 -->
    <script type="text/html" id="productSelectTemplate">
        <div style="padding: 20px;">
            <div class="layui-form" lay-filter="productSearchForm">
                <div class="layui-form-item">
                    <div class="layui-inline" style="margin-right: 0;">
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="categoryName" placeholder="请输入分类名称" class="layui-input">
                            <i class="layui-icon layui-icon-search" style="position: absolute; left: 8px; top: 50%; transform: translateY(-50%);"></i>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-right: 0;">
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="productCode" placeholder="请输入物料编码" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-right: 0;">
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="productName" placeholder="请输入物料名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="productSearch">
                            <i class="layui-icon layui-icon-search"></i>搜索
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="productReset">
                            重置
                        </button>
                    </div>
                </div>
            </div>

            <div class="layui-form" lay-filter="productListForm">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">物料产品分类</li>
                        <li>原材料</li>
                        <li>产品</li>
                        <li>半成品</li>
                        <li>产成品</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <table id="productTable" lay-filter="productTable"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>

    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;

            // 监听来源类型切换
            form.on('radio(sourceType)', function(data){
                if(data.value === '客户订单') {
                    $('.customer-order-fields').show();
                } else {
                    $('.customer-order-fields').hide();
                }
            });

            // 监听自动生成开关
            form.on('switch(autoGenerate)', function(data){
                var $workOrderCode = $(data.elem).closest('.layui-form-item').find('input[name="workOrderCode"]');
                if(data.elem.checked) {
                    // 选中自动生成时
                    $workOrderCode.prop('readonly', true).addClass('layui-disabled');
                    generateWorkOrderCode($workOrderCode);
                } else {
                    // 取消自动生成时
                    $workOrderCode.prop('readonly', false).removeClass('layui-disabled').val('');
                }
            });

            // 生成工单编码函数
            function generateWorkOrderCode($input) {
                // 生成规则：WO + 年月日 + 4位序号
                var date = new Date();
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString().padStart(2, '0');
                var day = date.getDate().toString().padStart(2, '0');
                
                // 这里应该调用后端接口获取序号，这里暂时模拟
                var sequence = Math.floor(Math.random() * 9999).toString().padStart(4, '0');
                
                var code = 'WO' + year + month + day + sequence;
                $input.val(code);
            }

            // 初始化表格
            table.render({
                elem: '#mainTable',
                url: '/ProductionWorkOrderMain/GetProductionWorkOrderList',
                page: true,
                toolbar: '#toolbarTpl',
                defaultToolbar: ['filter', 'exports', 'print'],
                cols: [[
                    {field: 'workOrderCode', title: '工单编码', width: 150},
                    {field: 'workOrderName', title: '工单名称', width: 200},
                    {field: 'sourceType', title: '来源类型', width: 100},
                    {field: 'workOrderType', title: '工单类型', width: 100},
                    {field: 'productCode', title: '产品编号', width: 120},
                    {field: 'productName', title: '产品名称', width: 200},
                    {field: 'workOrderQuantity', title: '数量', width: 100},
                    {field: 'demandDate', title: '需求日期', width: 120, templet: function(d){
                        return d.demandDate ? (new Date(d.demandDate)).toLocaleDateString() : '';
                    }},
                    {field: 'documentStatus', title: '状态', width: 100, templet: '#statusTpl'},
                    {title: '操作', width: 150, templet: '#operationBar', fixed: 'right'}
                ]],
                response: {
                    statusCode: 0
                },
                parseData: function(res){
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    };
                }
            });

            // 搜索表单提交
            form.on('submit(searchBtn)', function(data){
                table.reload('mainTable', {
                    where: data.field,
                    page: {
                        curr: 1
                    }
                });
                return false;
        });

            // 新增按钮点击事件
            $('#addBtn').on('click', function(){
                layer.open({
                    type: 1,
                    title: '新增工单',
                    area: ['80%', '90%'],
                    content: $('#addFormTemplate').html(),
                    success: function(layero, index){
                        form.render(); // 重新渲染表单
                        // 初始化时根据默认选中的来源类型显示/隐藏字段
                        var sourceType = $('input[name="sourceType"]:checked').val();
                        if(sourceType === '客户订单') {
                            $('.customer-order-fields').show();
                        } else {
                            $('.customer-order-fields').hide();
                        }
                        
                        // 初始化日期选择器
                        layui.laydate.render({
                            elem: '#demandDate'
                        });

                        // 数量加减按钮事件
                        window.changeQuantity = function(delta) {
                            var input = $('input[name="quantity"]');
                            var value = parseInt(input.val()) || 1;
                            value += delta;
                            if(value < 1) value = 1;
                            input.val(value);
                        };
                    }
                });
            });

            // 监听工具条
            table.on('tool(mainTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    layer.open({
                        type: 2,
                        title: '编辑工单',
                        area: ['80%', '90%'],
                        content: '/ProductionWorkOrderMain/EditWorkOrder?id=' + data.id
                    });
                } else if(obj.event === 'del'){
                    layer.confirm('确定要删除这条工单记录吗？', function(index){
                        $.ajax({
                            url: '/ProductionWorkOrderMain/DeleteWorkOrder',
                            type: 'POST',
                            data: { id: data.id },
                            success: function(res){
                                if(res.success){
                                    layer.msg('删除成功');
                                    obj.del();
                                } else {
                                    layer.msg(res.message || '删除失败');
                                }
                            },
                            error: function(){
                                layer.msg('删除失败，请稍后重试');
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            // 产品选择相关
            function initProductTable(filter) {
                table.render({
                    elem: '#productTable',
                    url: '/ProductionWorkOrderMain/GetProducts',
                    where: filter,
                    page: true,
                    cols: [[
                        {type: 'radio'},
                        {field: 'productCode', title: '物料编码', width: 120},
                        {field: 'productName', title: '物料名称', width: 150},
                        {field: 'specification', title: '规格型号', width: 120},
                        {field: 'unit', title: '单位', width: 80},
                        {field: 'productType', title: '物料/产品', width: 100},
                        {field: 'categoryName', title: '所属分类', width: 120},
                        {field: 'createTime', title: '创建时间', width: 160}
                    ]],
                    height: 'full-350',
                    response: {
                        statusCode: 0
                    },
                    parseData: function(res){
                        return {
                            "code": res.code,
                            "msg": res.msg,
                            "count": res.count,
                            "data": res.data
                        };
                    }
                });
            }

            // 点击产品搜索按钮
            form.on('submit(productSearch)', function(data){
                table.reload('productTable', {
                    where: data.field,
                    page: {curr: 1}
                });
                return false;
            });

            // 点击重置按钮
            form.on('submit(productReset)', function(data){
                var $form = $('form[lay-filter="productSearchForm"]');
                $form[0].reset();
                table.reload('productTable', {
                    where: {},
                    page: {curr: 1}
                });
                return false;
            });

            // 监听保存按钮提交
            form.on('submit(saveForm)', function(data){
                // 表单验证
                if(!data.field.workOrderCode) {
                    layer.msg('请输入工单编号');
                    return false;
                }
                if(!data.field.workOrderName) {
                    layer.msg('请输入工单名称');
                    return false;
                }
                if(!data.field.productCode) {
                    layer.msg('请输入产品编号');
                    return false;
                }
                if(!data.field.productName) {
                    layer.msg('请输入产品名称');
                    return false;
                }
                if(!data.field.quantity || data.field.quantity <= 0) {
                    layer.msg('请输入有效的工单数量');
                    return false;
                }
                if(!data.field.demandDate) {
                    layer.msg('请选择需求日期');
                    return false;
                }

                // 发送保存请求
                $.ajax({
                    url: '/ProductionWorkOrderMain/AddProductionWorkOrder',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        WorkOrderCode: data.field.workOrderCode,
                        WorkOrderName: data.field.workOrderName,
                        SourceType: data.field.sourceType || "客户订单",
                        OrderCode: data.field.orderCode || "",
                        DocumentStatus: 0,
                        WorkOrderType: data.field.workOrderType || "自产",
                        ProductCode: data.field.productCode,
                        ProductName: data.field.productName,
                        ProductModel: data.field.specification || "",
                        Unit: data.field.unit || "",
                        WorkOrderQuantity: parseInt(data.field.quantity) || 0,
                        DemandDate: data.field.demandDate,
                        BatchNo: data.field.batchNumber || "",
                        Remark: data.field.remark || "",
                        CustomerCode: data.field.customerCode || "",
                        CustomerName: data.field.customerName || ""
                    }),
                    success: function(res) {
                        if(res.success) {
                            layer.msg('保存成功');
                            layer.closeAll('page');
                            // 刷新表格
                            table.reload('mainTable');
                        } else {
                            layer.msg(res.message || '保存失败');
                        }
                    },
                    error: function(xhr) {
                        console.log('Error:', xhr);
                        layer.msg((xhr.responseJSON && xhr.responseJSON.message) || '保存失败，请稍后重试');
                    }
                });
                return false;
            });

            // 监听产品选择
            table.on('radio(productTable)', function(obj){
                var $form = $(obj.tr.closest('.layui-layer-content')).closest('.layui-layer').data('parentForm');
                $form.find('input[name="productCode"]').val(obj.data.productCode);
                $form.find('input[name="productName"]').val(obj.data.productName);
                $form.find('input[name="specification"]').val(obj.data.specification);
                $form.find('input[name="unit"]').val(obj.data.unit);
                layer.closeAll('page');
            });

            // 点击产品选择图标
            $(document).on('click', '.select-product', function(){
                var $form = $(this).closest('form');
                layer.open({
                    type: 1,
                    title: '物料产品选择',
                    area: ['80%', '80%'],
                    content: $('#productSelectTemplate').html(),
                    success: function(layero){
                        $(layero).data('parentForm', $form);
                        form.render();
                        initProductTable();
                    }
                });
            });
        });
    </script>

    <!-- 添加表单字段 -->
    <script type="text/html" id="addFormTemplate">
        <form class="layui-form" style="padding: 20px;">
            @Html.AntiForgeryToken()
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;"><span style="color: red;">*</span>工单编号</label>
                    <div class="layui-input-inline" style="width: 50%;">
                        <input type="text" name="workOrderCode" placeholder="请输入工单编号" class="layui-input" lay-verify="required">
                    </div>
                    <div class="layui-form-mid" style="padding: 0 10px!important;">
                        <input type="checkbox" name="autoGenerate" lay-filter="autoGenerate" lay-skin="switch" lay-text="自动生成|手动输入" title="自动生成">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;"><span style="color: red;">*</span>工单名称</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <input type="text" name="workOrderName" placeholder="请输入工单名称" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;"><span style="color: red;">*</span>来源类型</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <input type="radio" name="sourceType" value="客户订单" title="客户订单" lay-filter="sourceType" checked>
                        <input type="radio" name="sourceType" value="库存备货" title="库存备货" lay-filter="sourceType">
                    </div>
                </div>
                <div class="layui-inline customer-order-fields" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;">订单编号</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <input type="text" name="orderCode" placeholder="请输入订单编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;">单据状态</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <select name="documentStatus">
                            <option value="0">草稿</option>
                            <option value="1">已确认</option>
                            <option value="2">已完成</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;"><span style="color: red;">*</span>工单类型</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <select name="workOrderType" lay-verify="required">
                            <option value="自产">自产</option>
                            <option value="外协">外协</option>
                            <option value="外购">外购</option>
                        </select>
                    </div>
                </div>
                                    <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;"><span style="color: red;">*</span>产品编号</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <input type="text" name="productCode" placeholder="请输入产品编号" class="layui-input">
                        <i class="layui-icon layui-icon-search select-product" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer;"></i>
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;"><span style="color: red;">*</span>产品名称</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <input type="text" name="productName" placeholder="请输入产品名称" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;">规格型号</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <input type="text" name="specification" placeholder="请输入规格型号" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;">单位</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <input type="text" name="unit" placeholder="请输入单位" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;"><span style="color: red;">*</span>工单数量</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <div style="display: flex; align-items: center;">
                            <button type="button" class="layui-btn layui-btn-primary" onclick="changeQuantity(-1)">-</button>
                            <input type="number" name="quantity" value="1" class="layui-input" style="width: 60px; text-align: center; margin: 0 5px;">
                            <button type="button" class="layui-btn layui-btn-primary" onclick="changeQuantity(1)">+</button>
                        </div>
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;"><span style="color: red;">*</span>需求日期</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <input type="text" name="demandDate" id="demandDate" placeholder="请选择需求日期" class="layui-input">
                        <i class="layui-icon layui-icon-date" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%);"></i>
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;">批次号</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <input type="text" name="batchNumber" placeholder="请输入批次号" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item customer-order-fields">
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;">客户编码</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <input type="text" name="customerCode" placeholder="请选择客户" class="layui-input">
                        <i class="layui-icon layui-icon-search" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer;"></i>
                    </div>
                </div>
                <div class="layui-inline" style="width: 45%;">
                    <label class="layui-form-label" style="color: #333;">客户名称</label>
                    <div class="layui-input-inline" style="width: 70%;">
                        <input type="text" name="customerName" placeholder="请输入客户名称" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" style="color: #333;">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="请输入内容" class="layui-textarea" style="width: 85%;"></textarea>
                </div>
            </div>

            <div class="layui-form-item" style="text-align: center; margin-top: 30px;">
                <button type="button" class="layui-btn" lay-submit lay-filter="saveForm">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
            </div>
        </form>
    </script>
</body>
</html>


